<template>
  <div class="inventory-query-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>库存查询</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleExport">导出</el-button>
          </div>
        </div>
      </template>

      <el-form :inline="true" :model="queryForm" class="search-form">
        <el-form-item label="物料编码">
          <el-input
            v-model="queryForm.materialCode"
            placeholder="请输入物料编码"
          />
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input
            v-model="queryForm.materialName"
            placeholder="请输入物料名称"
          />
        </el-form-item>
        <el-form-item label="仓库">
          <el-select
            v-model="queryForm.warehouse"
            placeholder="请选择仓库"
            clearable
          >
            <el-option
              v-for="item in warehouseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="库位">
          <el-select
            v-model="queryForm.location"
            placeholder="请选择库位"
            clearable
            :disabled="!queryForm.warehouse"
          >
            <el-option
              v-for="item in locationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="queryForm.batchNo" placeholder="请输入批次号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.batchList" border>
              <el-table-column prop="batchNo" label="批次号" />
              <el-table-column prop="manufactureDate" label="生产日期" />
              <el-table-column prop="expiryDate" label="有效期至" />
              <el-table-column prop="quantity" label="数量" />
              <el-table-column prop="location" label="库位" />
              <el-table-column prop="status" label="状态">
                <template #default="scope">
                  <el-tag :type="getBatchStatusType(scope.row.status)">
                    {{ getBatchStatusText(scope.row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="materialCode" label="物料编码" width="150" />
        <el-table-column prop="materialName" label="物料名称" min-width="150" />
        <el-table-column prop="specification" label="规格型号" width="120" />
        <el-table-column prop="unit" label="单位" width="80" />
        <el-table-column prop="warehouse" label="仓库" width="120" />
        <el-table-column prop="totalQuantity" label="库存数量" width="100" />
        <el-table-column
          prop="availableQuantity"
          label="可用数量"
          width="100"
        />
        <el-table-column prop="lockedQuantity" label="锁定数量" width="100" />
        <el-table-column prop="transitQuantity" label="在途数量" width="100" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleDetail(scope.row)"
              >库存明细</el-button
            >
            <el-button link type="primary" @click="handleHistory(scope.row)"
              >出入库记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 库存明细对话框 -->
    <el-dialog v-model="detailDialogVisible" title="库存明细" width="80%">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="物料编码">{{
          currentMaterial.materialCode
        }}</el-descriptions-item>
        <el-descriptions-item label="物料名称">{{
          currentMaterial.materialName
        }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{
          currentMaterial.specification
        }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{
          currentMaterial.unit
        }}</el-descriptions-item>
        <el-descriptions-item label="库存总量">{{
          currentMaterial.totalQuantity
        }}</el-descriptions-item>
        <el-descriptions-item label="可用数量">{{
          currentMaterial.availableQuantity
        }}</el-descriptions-item>
      </el-descriptions>

      <el-table :data="detailData" border class="mt-20">
        <el-table-column prop="warehouse" label="仓库" />
        <el-table-column prop="location" label="库位" />
        <el-table-column prop="batchNo" label="批次号" />
        <el-table-column prop="manufactureDate" label="生产日期" />
        <el-table-column prop="expiryDate" label="有效期至" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="lockedQuantity" label="锁定数量" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getBatchStatusType(scope.row.status)">
              {{ getBatchStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 出入库记录对话框 -->
    <el-dialog v-model="historyDialogVisible" title="出入库记录" width="80%">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="物料编码">{{
          currentMaterial.materialCode
        }}</el-descriptions-item>
        <el-descriptions-item label="物料名称">{{
          currentMaterial.materialName
        }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{
          currentMaterial.specification
        }}</el-descriptions-item>
      </el-descriptions>

      <el-table :data="historyData" border class="mt-20">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="type" label="类型">
          <template #default="scope">
            <el-tag :type="getHistoryTypeTag(scope.row.type)">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="documentNo" label="单据号" />
        <el-table-column prop="warehouse" label="仓库" />
        <el-table-column prop="location" label="库位" />
        <el-table-column prop="batchNo" label="批次号" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="operator" label="操作人" />
        <el-table-column prop="remark" label="备注" />
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="historyCurrentPage"
          v-model:page-size="historyPageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="historyTotal"
          @size-change="handleHistorySizeChange"
          @current-change="handleHistoryCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

// 查询表单
const queryForm = reactive({
  materialCode: "",
  materialName: "",
  warehouse: "",
  location: "",
  batchNo: "",
});

// 示例物料数据
const exampleMaterials = [
  {
    materialCode: "MAT001",
    materialName: "螺丝",
    specification: "M6x20",
    unit: "个",
    warehouse: "一号仓库",
    totalQuantity: 5000,
    availableQuantity: 4500,
    lockedQuantity: 300,
    transitQuantity: 200,
    batchList: [
      {
        batchNo: "B20230001",
        manufactureDate: "2023-01-01",
        expiryDate: "2025-12-31",
        quantity: 1500,
        location: "A1-01",
        status: "normal",
      },
      {
        batchNo: "B20230002",
        manufactureDate: "2023-02-15",
        expiryDate: "2026-02-14",
        quantity: 1000,
        location: "A1-02",
        status: "locked",
      },
      {
        batchNo: "B20230003",
        manufactureDate: "2023-03-10",
        expiryDate: "2025-03-09",
        quantity: 2000,
        location: "A1-03",
        status: "expired",
      },
    ],
  },
  {
    materialCode: "MAT002",
    materialName: "螺母",
    specification: "M6",
    unit: "个",
    warehouse: "二号仓库",
    totalQuantity: 8000,
    availableQuantity: 7800,
    lockedQuantity: 100,
    transitQuantity: 100,
    batchList: [
      {
        batchNo: "B20230004",
        manufactureDate: "2023-01-15",
        expiryDate: "2026-01-14",
        quantity: 2500,
        location: "B1-01",
        status: "normal",
      },
      {
        batchNo: "B20230005",
        manufactureDate: "2023-02-20",
        expiryDate: "2025-02-19",
        quantity: 3000,
        location: "B1-02",
        status: "normal",
      },
    ],
  },
  // ...更多物料数据
];

// 表格数据
const tableData = ref(exampleMaterials); // 使用示例数据初始化表格数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(exampleMaterials.length); // 设置总数据量为示例数据的长度

// 库存明细
const detailDialogVisible = ref(false);
const currentMaterial = ref({});
const detailData = ref([]);

// 出入库记录
const historyDialogVisible = ref(false);
const historyData = ref([]);
const historyCurrentPage = ref(1);
const historyPageSize = ref(10);
const historyTotal = ref(0);

// 状态转换
const getBatchStatusType = (status) => {
  const map = {
    normal: "success",
    locked: "warning",
    expired: "danger",
  };
  return map[status] || "info";
};

const getBatchStatusText = (status) => {
  const map = {
    normal: "正常",
    locked: "锁定",
    expired: "过期",
  };
  return map[status] || status;
};

const getHistoryTypeTag = (type) => {
  if (type.includes("入库")) return "success";
  if (type.includes("出库")) return "danger";
  return "info";
};

// 查询方法
const handleSearch = () => {
  // 实现查询逻辑
};

const handleReset = () => {
  queryForm.materialCode = "";
  queryForm.materialName = "";
  queryForm.warehouse = "";
  queryForm.location = "";
  queryForm.batchNo = "";
  handleSearch();
};

// 导出
const handleExport = () => {
  // 实现导出逻辑
  ElMessage.success("导出成功");
};

// 库存明细
const handleDetail = (row) => {
  currentMaterial.value = row;
  detailDialogVisible.value = true;
  // 加载库存明细数据
};

// 出入库记录
const handleHistory = (row) => {
  currentMaterial.value = row;
  historyDialogVisible.value = true;
  // 加载出入库记录数据
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};

const handleHistorySizeChange = (val) => {
  historyPageSize.value = val;
  // 重新加载出入库记录
};

const handleHistoryCurrentChange = (val) => {
  historyCurrentPage.value = val;
  // 重新加载出入库记录
};
</script>

<style scoped>
.inventory-query-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.mt-20 {
  margin-top: 20px;
}
</style>
